<template>
  <a-card class="general-card" title="">
    <a-grid :cols="24" :col-gap="12" :row-gap="12">

      <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 }">
        <RevenueChannel :user-id="userId"/>
      </a-grid-item>

      <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 }">
        <RevenueNotSettled :user-id="userId"/>
      </a-grid-item>

      <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 }">
        <RevenueSettled :user-id="userId"/>
      </a-grid-item>

    </a-grid>
  </a-card>
</template>

<script setup lang="ts">
import {watch} from 'vue'
import RevenueNotSettled from './RevenueNotSettled.vue'
import RevenueSettled from './RevenueSettled.vue'
import RevenueChannel from './RevenueChannel.vue'

const props = withDefaults(defineProps<Props>(), {
  userId: '',
})

interface Props {
  userId: string
}

watch(
    () => props.userId,
    (newVal) => {
      if (newVal) {
        // console.log('userId变化，当前值：', newVal)
        // 这里可以做后续的数据请求等操作
      }
    },
    {immediate: true}
)
</script>

<style scoped lang="less"></style>
